import { useParams, Link } from 'react-router-dom';
import { CheckIcon, ArrowLeftIcon } from 'lucide-react';
import { usePageTitle } from '../hooks/usePageTitle';
import { ImageWithLoader } from '../components/ImageWithLoader';

export function SolutionDetail() {
  const {
    id
  } = useParams<{
    id: string;
  }>();
  // Mock data for solutions - in a real app, this would come from an API
  const solutions = {
    '1': {
      title: 'Smart Kitchen Remodel',
      image: 'https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
      category: 'Kitchen',
      description: 'A complete kitchen transformation with integrated smart appliances that work together seamlessly.',
      overview: 'This comprehensive kitchen solution combines premium appliances with smart technology to create a cooking space that is both beautiful and functional. Designed for serious home cooks who value efficiency and connectivity, this package includes refrigeration, cooking, and cleaning appliances that communicate with each other and integrate with your existing smart home ecosystem.',
      challenge: 'The homeowners wanted to modernize their outdated kitchen with state-of-the-art appliances that would work together as a unified system. They needed solutions for meal planning, food storage management, and precision cooking that would accommodate their busy lifestyle and entertaining needs.',
      featuredProducts: [{
        name: 'Samsung Bespoke 4-Door Refrigerator',
        description: 'Customizable panels, flexible temperature zones, and AI-powered energy management.',
        image: 'https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
        price: '$2,999'
      }, {
        name: 'Bosch Series 8 Smart Oven',
        description: 'Precision temperature control and intuitive app for perfect results every time.',
        image: 'https://images.unsplash.com/photo-1631679706909-1844bbd07221?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1992&q=80',
        price: '$2,499'
      }, {
        name: 'LG QuadWash Dishwasher',
        description: 'Advanced cleaning technology with smart diagnostics and voice control.',
        image: 'https://images.unsplash.com/photo-1584269600464-37b1b58a9fe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80',
        price: '$1,199'
      }],
      benefits: ['Seamless integration between all kitchen appliances', 'Voice control through Google Home or Amazon Alexa', 'Remote monitoring and control via smartphone apps', 'Energy usage optimization and scheduling', 'Automatic inventory management and grocery ordering', 'Guided cooking with step-by-step instructions'],
      implementation: 'Our team worked closely with the homeowners to design a kitchen layout that optimized workflow and appliance placement. We coordinated the delivery and installation of all appliances, ensuring proper power and water connections. After installation, we configured the smart features, connected all devices to the home network, and provided comprehensive training on system use and maintenance.',
      result: 'The completed kitchen remodel has transformed how the homeowners cook and entertain. The integrated appliances work together seamlessly, with the refrigerator suggesting recipes based on available ingredients, the oven preheating automatically when a recipe is selected, and the dishwasher optimizing its cycle based on the meal prepared. Energy consumption has decreased by 22% despite increased functionality.',
      testimonial: {
        quote: 'The integrated kitchen solution recommended by AppliancePicks transformed how we cook and entertain. Everything works together beautifully, and the smart features have actually made us more efficient in the kitchen.',
        author: 'Sarah M., Boston',
        image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80'
      },
      relatedSolutions: ['2', '3']
    },
    '2': {
      title: 'Efficient Laundry Setup',
      image: 'https://images.unsplash.com/photo-1582735689369-4fe89db7114c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
      category: 'Laundry',
      description: 'Space-optimized laundry room with high-efficiency machines and smart organization.',
      overview: 'This laundry solution maximizes functionality in limited space while delivering premium fabric care. Designed for busy families with diverse laundry needs, the system combines high-efficiency appliances with smart features that simplify the washing process and reduce utility costs.',
      challenge: 'The homeowners needed to transform a small laundry closet into a fully functional laundry center capable of handling large volumes of laundry for a family of five. Space constraints, energy efficiency concerns, and the need to properly care for various fabric types were key considerations.',
      featuredProducts: [{
        name: 'Miele TwinDos Washing Machine',
        description: 'Precision dosing system and intelligent fabric detection for perfect cleaning.',
        image: 'https://images.unsplash.com/photo-1610557892470-55d9e80c0bce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80',
        price: '$1,799'
      }, {
        name: 'Samsung Smart Dryer',
        description: 'AI-powered drying with wrinkle prevention and energy optimization.',
        image: 'https://images.unsplash.com/photo-1604335399105-a0c585fd81a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
        price: '$1,299'
      }, {
        name: 'LG Styler Steam Closet',
        description: 'Gentle steam refreshing for delicate garments that require special care.',
        image: 'https://images.unsplash.com/photo-1584269155219-e82bed7b6392?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80',
        price: '$1,299'
      }],
      benefits: ['Reduced water consumption by up to 40% compared to conventional machines', 'Energy usage monitoring and optimization through smartphone app', 'Automatic detergent and softener dispensing based on load size and fabric type', 'Remote cycle monitoring and notifications when laundry is complete', 'Extended garment life through precise fabric care settings', 'Space-saving stacked configuration with custom storage solutions'],
      implementation: "We reconfigured the laundry closet to accommodate stacked full-size appliances, adding custom cabinetry for storage and a pull-out folding surface. Plumbing was upgraded to support the high-efficiency washer, and dedicated electrical circuits were installed for all appliances. The entire system was connected to the home', s, WiFi, network, and, integrated, with: the, homeowners, ' smartphones.':",
      result: 'The completed laundry center processes loads 30% faster than the previous setup while using significantly less water and energy. The automated dispensing system has eliminated detergent waste, and the steam closet has reduced dry cleaning expenses by 60%. The space-efficient design has transformed a cramped closet into a fully functional laundry command center.',
      testimonial: {
        quote: "I was skeptical about investing in premium appliances for our tiny laundry space, but the efficiency and performance have completely justified the cost. We're saving time, money, and water while getting better cleaning results.",
        author: 'Michael T., Chicago',
        image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80'
      },
      relatedSolutions: ['1', '3']
    },
    '3': {
      title: 'Whole-Home Climate System',
      image: 'https://images.unsplash.com/photo-1558211583-d26f610c1eb1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2076&q=80',
      category: 'Climate',
      description: 'Integrated climate control with zoned heating/cooling and air quality management.',
      overview: 'This comprehensive climate solution creates an optimal indoor environment throughout the home by integrating heating, cooling, air purification, and humidity control into a single smart system. Designed for homes with multiple zones and varying comfort needs, the solution prioritizes both comfort and energy efficiency.',
      challenge: 'The homeowners were struggling with inconsistent temperatures throughout their two-story home, poor air quality affecting allergy sufferers, and high utility bills from an aging HVAC system. They needed a solution that could provide personalized comfort in different rooms while improving overall air quality and energy efficiency.',
      featuredProducts: [{
        name: 'Ecobee Smart Thermostat Premium',
        description: 'AI-powered climate control with room sensors for optimal comfort.',
        image: 'https://images.unsplash.com/photo-1585771724684-38269d6639fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
        price: '$249'
      }, {
        name: 'Dyson Pure Hot+Cool Air Purifier',
        description: 'Exceptional filtration with heating and cooling functionality.',
        image: 'https://images.unsplash.com/photo-1594142243342-41d20b96e928?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
        price: '$649'
      }, {
        name: 'Mitsubishi Multi-Zone Mini Split System',
        description: 'Whisper-quiet operation with advanced filtration and energy efficiency.',
        image: 'https://images.unsplash.com/photo-1624811533744-f85d5325d49c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
        price: '$4,899'
      }],
      benefits: ['Individualized temperature control for up to 8 different zones', 'Real-time air quality monitoring with automatic purification adjustments', 'Intelligent scheduling based on occupancy patterns and weather forecasts', 'Voice control through multiple platforms (Alexa, Google Assistant, HomeKit)', 'Up to 40% reduction in heating and cooling costs', 'Detailed energy usage reporting and optimization recommendations'],
      implementation: 'We replaced the existing central HVAC system with a multi-zone mini-split system for primary heating and cooling. Smart thermostats with remote sensors were installed in each zone, and air purifiers were strategically placed to maximize coverage. All components were integrated into a central management system accessible via smartphone and voice assistants.',
      result: 'The new climate system has eliminated temperature inconsistencies throughout the home while reducing energy consumption by 35%. Air quality measurements show a 95% reduction in particulate matter and allergens. The homeowners now enjoy personalized comfort in each room, with the system automatically adjusting based on occupancy and preferences.',
      testimonial: {
        quote: "The difference in comfort and air quality is remarkable. Our utility bills have dropped significantly, and my husband's allergies have improved dramatically. The system is sophisticated but surprisingly easy to use through the app.",
        author: 'Jennifer L., Seattle',
        image: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1961&q=80'
      },
      relatedSolutions: ['1', '2']
    }
  };
  const solution = solutions[id as keyof typeof solutions] || solutions['1'];
  
  // Set page title
  usePageTitle(solution.title);
  
  // Find related solutions data
  const relatedSolutionsData = solution.relatedSolutions.map(relatedId => {
    const relatedSolution = solutions[relatedId as keyof typeof solutions];
    return {
      id: relatedId,
      title: relatedSolution?.title || '',
      image: relatedSolution?.image || '',
      category: relatedSolution?.category || ''
    };
  });
  return <div className="w-full bg-white">
      {/* Hero image */}
      <div className="relative w-full h-96">
        <ImageWithLoader src={solution.image} alt={solution.title} className="w-full h-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
        <div className="absolute bottom-0 left-0 right-0 p-8">
          <div className="container mx-auto">
            <div className="flex items-center mb-2">
              <span className="bg-[#d4a373] text-white text-sm px-2 py-1 rounded">
                {solution.category} Solution
              </span>
            </div>
            <h1 className="text-3xl md:text-4xl font-bold text-white mb-2">
              {solution.title}
            </h1>
            <p className="text-white text-lg max-w-2xl">
              {solution.description}
            </p>
          </div>
        </div>
      </div>
      {/* Breadcrumb */}
      <div className="bg-[#f8f9fa] border-b">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center text-sm">
            <Link to="/" className="text-gray-500 hover:text-[#d4a373]">
              Home
            </Link>
            <span className="mx-2 text-gray-400">/</span>
            <Link to="/solutions" className="text-gray-500 hover:text-[#d4a373]">
              Solutions
            </Link>
            <span className="mx-2 text-gray-400">/</span>
            <span className="text-gray-700">{solution.title}</span>
          </div>
        </div>
      </div>
      {/* Solution content */}
      <div className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          {/* Overview section */}
          <div className="mb-12">
            <h2 className="text-3xl font-bold mb-6">Overview</h2>
            <p className="text-gray-700 text-lg leading-relaxed mb-6">
              {solution.overview}
            </p>
            <div className="bg-[#f8f9fa] p-6 rounded-lg">
              <h3 className="font-bold text-xl mb-3">The Challenge</h3>
              <p className="text-gray-700">{solution.challenge}</p>
            </div>
          </div>
          {/* Featured products */}
          <div className="mb-12">
            <h2 className="text-3xl font-bold mb-6">Featured Products</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {solution.featuredProducts.map((product, index) => <div key={index} className="bg-[#f8f9fa] rounded-lg overflow-hidden shadow-md">
                  <ImageWithLoader src={product.image} alt={product.name} className="w-full h-48 object-cover" />
                  <div className="p-4">
                    <h3 className="font-bold text-lg mb-2">{product.name}</h3>
                    <p className="text-gray-600 text-sm mb-3">
                      {product.description}
                    </p>
                    <div className="font-semibold">{product.price}</div>
                  </div>
                </div>)}
            </div>
          </div>
          {/* Benefits */}
          <div className="mb-12">
            <h2 className="text-3xl font-bold mb-6">Solution Benefits</h2>
            <div className="bg-white shadow-md rounded-lg p-6">
              <ul className="space-y-4">
                {solution.benefits.map((benefit, index) => <li key={index} className="flex items-start">
                    <div className="bg-[#d4a373] rounded-full p-1 mr-3 flex-shrink-0">
                      <CheckIcon size={16} className="text-white" />
                    </div>
                    <span>{benefit}</span>
                  </li>)}
              </ul>
            </div>
          </div>
          {/* Implementation */}
          <div className="mb-12">
            <h2 className="text-3xl font-bold mb-6">Implementation</h2>
            <p className="text-gray-700 leading-relaxed mb-6">
              {solution.implementation}
            </p>
            {/* Before/After image placeholder */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
              <div>
                <ImageWithLoader src={`https://source.unsplash.com/random/600x400?${solution.category.toLowerCase()},before&sig=1`} alt="Before implementation" className="rounded-lg w-full h-64 object-cover" />
                <p className="text-center text-sm text-gray-500 mt-2">Before</p>
              </div>
              <div>
                <ImageWithLoader src={`https://source.unsplash.com/random/600x400?${solution.category.toLowerCase()},after&sig=2`} alt="After implementation" className="rounded-lg w-full h-64 object-cover" />
                <p className="text-center text-sm text-gray-500 mt-2">After</p>
              </div>
            </div>
            <h3 className="font-bold text-xl mb-3">Results</h3>
            <p className="text-gray-700 leading-relaxed">{solution.result}</p>
          </div>
          {/* Testimonial */}
          <div className="mb-12 bg-[#343a40] text-white p-8 rounded-lg">
            <div className="flex items-start">
              <div className="mr-4">
                <ImageWithLoader src={solution.testimonial.image} alt={solution.testimonial.author} className="w-16 h-16 rounded-full object-cover" />
              </div>
              <div>
                <p className="italic mb-4">"{solution.testimonial.quote}"</p>
                <p className="font-medium">— {solution.testimonial.author}</p>
              </div>
            </div>
          </div>
          {/* Related solutions */}
          <div className="mb-8">
            <h2 className="text-2xl font-bold mb-6">Related Solutions</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {relatedSolutionsData.map(relatedSolution => <Link key={relatedSolution.id} to={`/solutions/${relatedSolution.id}`} className="bg-[#f8f9fa] rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow group">
                  <div className="h-48 overflow-hidden">
                    <ImageWithLoader src={relatedSolution.image} alt={relatedSolution.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                  </div>
                  <div className="p-4">
                    <span className="bg-[#e9ecef] text-[#343a40] text-xs px-2 py-1 rounded">
                      {relatedSolution.category}
                    </span>
                    <h3 className="font-bold text-lg mt-2 group-hover:text-[#d4a373] transition-colors">
                      {relatedSolution.title}
                    </h3>
                  </div>
                </Link>)}
            </div>
          </div>
          {/* Back to solutions */}
          <div className="mt-12 mb-8">
            <Link to="/solutions" className="flex items-center text-[#d4a373] hover:underline">
              <ArrowLeftIcon size={16} className="mr-2" />
              Back to all solutions
            </Link>
          </div>
        </div>
      </div>
    </div>;
}